<template>
	<div class="common-layout">
		<el-container>
			<el-aside :width="leftwidth">
				<el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
				@close="handleClose" unique-opened="true">
				<div class="logoandname">
					<span>后台管理系统</span>
				</div>
						<el-sub-menu index="1">
							<template #title>
								<el-icon>
									<location />
								</el-icon>
								<span>用户管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="1-1">用户列表</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
						<el-sub-menu index="2">
							<template #title>
								<el-icon>
									<Setting />
								</el-icon>
								<span>商品管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="2-1">商品列表</el-menu-item>
								<el-menu-item index="2-2">添加商品</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
					</el-menu>
			</el-aside>
			<el-container>
				<el-header>
					<el-button plain @click="showwidth" :icon="smolllogo"></el-button>
				</el-header>
				<el-main>Main</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script lang="ts" setup>
import { ref,onMounted,computed } from 'vue'
import {
	Document,
	Menu as IconMenu,
	Location,
	Setting,
	DArrowLeft,
	DArrowRight
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const leftwidth =ref("200px")
const smolllogo =ref(DArrowRight)
const showwidth=()=>{
	isCollapse.value=!isCollapse.value
	if(isCollapse.value==true){
		leftwidth.value="64px"
		smolllogo.value=DArrowLeft
	}else{
		leftwidth.value="200px"
		smolllogo.value=DArrowRight
	}
	console.log(isCollapse.value);
	
}
onMounted(() => {
	
})
const handleOpen = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
</script>
<style lang="scss" scoped>
.logoandname{
	text-align: center;
	height: 70px;
	line-height: 70px;
	font-size:24px;
	span{
		height: 80px;
		display: inline-block;
		overflow: hidden;
	}
}
.el-aside {
	// background-color: aqua;
	height: 100vh;

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
}

.el-header {
	min-width: 600px;
	// background-color: aquamarine;
	.el-button{
		margin-top: 20px;
	}
}

.el-main {
	min-width: 600px;
	background-color: aquamarine;
}
</style>
